<div class="query-panel">
    <div class="query-filters">
        <h4>腾讯云数据库</h4>
        <div class="filter-container">
            <button class="db-card btn btn-secondary" onclick="selectDatabase('mysql')">
                MySQL
            </button>
            
            <button class="db-card btn btn-secondary" onclick="selectDatabase('tdsql-c')">
                TDSQL-C
            </button>
            
            <button class="db-card btn btn-secondary" onclick="selectDatabase('sqlserver')">
                SQL Server
            </button>
            
            <button class="db-card btn btn-secondary" onclick="selectDatabase('postgresql')">
                PostgreSQL
            </button>
        </div>
    </div>
    
    <div id="database-config" class="query-results">
        <!-- 数据库配置内容将显示在这里 -->
    </div>
</div>

<script>
// 选择数据库类型
function selectDatabase(type) {
    const configElement = document.getElementById('database-config');
    
    // 移除所有按钮的激活状态
    document.querySelectorAll('#cloud-database .db-card').forEach(card => {
        card.classList.remove('active');
    });
    
    // 激活当前选中的按钮
    const selectedCard = event.target.closest('.db-card');
    if (selectedCard) {
        selectedCard.classList.add('active');
    }
    
    if (type === 'mysql') {
        // MySQL数据库配置
        
        // 从mysql文件夹加载内容
        fetch('database/mysql/mysql-config.php')
            .then(response => response.text())
            .then(html => {
                configElement.innerHTML = html;
            })
            .catch(error => {
                configElement.innerHTML = '<div class="no-data">MySQL配置加载失败，请稍后重试。</div>';
            });
    } else if (type === 'tdsql-c') {
        // TDSQL-C数据库配置
        
        // 从tdsql-c文件夹加载内容
        fetch('database/tdsql-c/tdsql-c-config.php')
            .then(response => response.text())
            .then(html => {
                configElement.innerHTML = html;
            })
            .catch(error => {
                configElement.innerHTML = '<div class="no-data">TDSQL-C配置加载失败，请稍后重试。</div>';
            });
    } else if (type === 'sqlserver') {
        // SQL Server数据库配置
        
        // 从sql-server文件夹加载内容
        fetch('database/sql-server/sql-server-config.php')
            .then(response => response.text())
            .then(html => {
                configElement.innerHTML = html;
            })
            .catch(error => {
                configElement.innerHTML = '<div class="no-data">SQL Server配置加载失败，请稍后重试。</div>';
            });
    } else if (type === 'postgresql') {
        // PostgreSQL数据库配置
        
        // 从postgresql文件夹加载内容
        fetch('database/postgresql/postgresql-config.php')
            .then(response => response.text())
            .then(html => {
                configElement.innerHTML = html;
            })
            .catch(error => {
                configElement.innerHTML = '<div class="no-data">PostgreSQL配置加载失败，请稍后重试。</div>';
            });
    } else {
        // 其他数据库类型
        configElement.innerHTML = `<div class="no-data">${getDisplayName(type)} 数据库配置功能正在开发中，敬请期待。</div>`;
    }
}

// 获取显示名称
function getDisplayName(type) {
    const names = {
        'tdsql-c': 'TDSQL-C',
        'mysql': 'MySQL',
        'sqlserver': 'SQL Server',
        'postgresql': 'PostgreSQL'
    };
    return names[type] || type;
}
</script>